// ******************************************************************1.初始化
//     富文本编辑器  demo展示缺配置项
// tinymce.init({
//   selector: '.layui-textarea',
//   language: 'zh_CN',
// });

// 调用富文本框  
initEditor();



//     cropper  
// 图片裁剪   图片裁剪   
$('#image').cropper({
  aspectRatio: 1,
  preview: '.img-preview'
});




// $('#image').cropper({
//   // 裁剪尺寸  
//   aspectRatio: 1,
//   //  裁剪对象  
//   preview: '.img-preview'
// })






$(".upload-btn").click(function () {
  $("#file").click();
});
// 表单文件拖拽事件  
// $('#file').on('change', function () {
//   // 获取图片对象    
//   let obj = this.files[0]
//   // 将图片改变成临时url地址   
//   let url = URL.createObjectURL(obj)
//   // 替换到上面图片位置   
//   $('#image').cropper('replace',url)

// })



// 表单文件拖拽改变事件 
$("#file").on("change", function () {

  // 1.获取图片对象；了解
  let obj = this.files[0];


  // 2.专门方法，把图片对象转化为临时URL地址: 了解
  let url = URL.createObjectURL(obj);


  // 3.替换到上面图片位置   查文档 了解
  $('#image').cropper("replace", url);
});

// ****************************************************************2.数据回填
// 1.获取id  

let url = location.href;
console.log(url);
let id = url.split("=")[1];


// 获取id   
// let url = location.href
// let id = url.split('=')[1]
// 下拉菜单  






// 初始化：
//     下拉菜单
let form = layui.form;
$.ajax({
  url: "/my/article/cates",
  success: function (res) {
    if (res.status == 0) {
      let str = `<option value="">请选择文章类别</option>`;
      res.data.forEach(item => {
        str += `<option value="${item.Id}">${item.name}</option>`;
      });
      $("select").html(str);
      // 重新创建div结构
      form.render("select");
      get();
    }
  }
});

// let form = layui.form
// $.ajax({
//   url: "/my/article/cates",
//   success: function (res) {
//     if (res.status == 0) {
//       let str = `<option value=''>请选择文章类别</option>`
//       // 遍历res   
//       res.data.forEach(item => {
//         str += `<option value='${item.id}'>${item.name}</option>`

//       })
//       $('select').html(str)
//       // 重新创建div 结构   
//       form.render('select')
//       get ()


//     }
//   }


// })





// let form = layui.form
// $.ajax({
//   url: "/my/article/cates",
//   success: function (res) {
//     if (res.status == 0) {
//        let str = `<option value="">请选择文章类别</option>`;
//       // 遍历数据    
//       res.data.forEach(item => {
//           str += `<option value='${item.Id}'>${item.name}</option>`
//         $('select').html(str)
//         form.render('select')
//         get ()
//       })
//     }
//   }
// })







// 2.获取该详情数据
function get() {
  $.ajax({
    url: "/my/article/" + id,
    success: function (res) {
      // console.log(res);
      if (res.status == 0) {
        // console.log(res.data);
        form.val("edit", res.data);

        // 插件：了解
        $('#image').cropper("replace", 'http://ajax.frontend.itheima.net' + res.data.cover_img);
      }
    }
  });
}
// 获取页面详情 

// function get() {
//   $.ajax({
//     url: "/my/article/" + id,
//     success: function (res) {
//       if (res.status == 0) {
//         // 给form表单赋值   
//         form.val('edit', res.data)
//         $("#image").cropper('replace','http://ajax.frontend.itheima.net' + res.data.cover_img)
        
//         }
//     }

//   })
// }







// ******************************************************************3.更新（仿造新增JS代码）
$("form").on("submit", function (e) {
  e.preventDefault();

  let fd = new FormData(this);
  console.log(fd);
  fd.append("Id", id);

  // 替换formdata 里面空的一项  
  fd.set("content", tinyMCE.activeEditor.getContent()); // 富文本

  // obj就是裁剪图片后的
  let obj = $('#image').cropper('getCroppedCanvas', {
    width: 280,
    height: 280

  });

  // console.log(obj); 
  //  表示二进制类型的大对象
  obj.toBlob(function (blob) {

    fd.append("cover_img", blob);

    $.ajax({
      processData: false, //
      contentType: false, //重要
      url: "/my/article/edit",
      type: "POST",
      data: fd,
      success: function (res) {
        layer.msg(res.message);
        if (res.status == 0) {

          window.parent.document.querySelector("#list").click();
        }
      }
    })


  });





})